<template>
  <view class="relative-position">

    <image :src="detail.thumb" mode="widthFix" class="origin-img"></image>
    <view class="padding-10">
      <u-form :model="infoForm" :labelWidth="80">
        <u-form-item label="姓名" prop="manName">
          <u-input placeholder="姓名" v-model="infoForm.manName"/>
        </u-form-item>
        <u-form-item label="学院" prop="uName">
          <u-input placeholder="学院" maxlength="12" v-model="infoForm.uName"/>
        </u-form-item>
        <u-form-item label="专业" prop="profName">
          <u-input placeholder="专业" maxlength="12" v-model="infoForm.profName"/>
        </u-form-item>
        <u-button text="立即生成" color="#FFC107" @click="onSaveData" class="margin-top-10"></u-button>
      </u-form>
    </view>
    <l-painter :board="poster" isCanvasToTempFilePath @success="getImg($event)" hidden/>
    <video-a-d/>
  </view>
</template>

<script>
import {
  base64ToPath
} from "image-tools";
import Loading from "../../components/loading";

export default {
  components: {
    Loading
  },
  data() {
    return {
      poster: {},
      infoForm: {
        manName: "",
        profName: "",
        uName: "",
      },
      showPop: false,
      imgUrl: "",
      detail: {}
    };
  },
  mounted() {

  },
  methods: {
    onSaveData() {
      if (
          !this.infoForm.manName ||
          !this.infoForm.uName ||
          !this.infoForm.profName
      ) {
        this.$util.showToast("请填写完整信息");
        return;
      }
      this.$util.showLoading("生成中，请耐心等待")
      this.showIntersAD()
      this.poster = {
        css: {
          width: "750rpx",
          position: "relative"
        },
        views: [{
          type: "image",
          src: this.detail.img,
          css: {
            width: "100%",
            minHeight: "200rpx",
          },
        },
          {
            type: 'text',
            text: this.infoForm.manName,
            css: {
              fontSize: '20rpx',
              position: 'absolute',
              top: '196rpx',
              right: '552rpx',
              textAlign: 'right',
              color: '#000000',
              zIndex: 10,
            },
          },
          {
            type: 'text',
            text: this.infoForm.uName,
            css: {
              fontSize: '20rpx',
              position: 'absolute',
              top: '262rpx',
              right: '460rpx',
              textAlign: 'right',
              color: '#000000',
              zIndex: 10,
            },
          },
          {
            type: 'text',
            text: this.infoForm.profName,
            css: {
              fontSize: '20rpx',
              position: 'absolute',
              top: '262rpx',
              right: '352rpx',
              color: '#000000',
              zIndex: 10,
            },
          },
        ],
      };

      // poster=posterData
    },

  },
};
</script>

<style lang="scss" scoped>
.origin-img {
  width: 100%;
  display: block;
  min-width: 100px;
}
</style>
